/**
 * useState()
 *
 *    语法：
 *      const [state, setState] = useState(initialValue)
 *      1. 返回值是一个数组，包含有两个元素
 *      2. 数组的第一项就是 状态数据
 *      3. 数组的第二项就是 修改这个状态数据的一个函数
 *      4. initialValue 是该 状态数据的初始值
 *      5. setState() 的语法
 *
 *        1. setState(newState)
 *        2. setState((oldState) => newState)
 *
 *      6. 多次 setState 的合并特性还是存在的
 *      7. setState 异步特性还是存在的
 *      8. 在  devtool 中要查看数据的话，是 hook 的形式
 *      9. 当 state 的值是一个对象时，修改时使用新的对象去替换已有对象，所有属性都得写
 *      10. 数据都是 不可变的 。
 */

import { useState } from "react";

function App() {
  const [count, setCount] = useState(1);
  const [msg, setMsg] = useState("~");
  const [person, setPerson] = useState({
    name: "张三",
    age: 18,
  });

  console.log("count", count); // 1
  console.log("msg", msg); // ~
  console.log("setCount", setCount); // function

  return (
    <>
      <h1>useState</h1>
      <button
        onClick={() => {
          setCount(2);
          setCount(3);
          setCount(4);
        }}
      >
        {count}
      </button>
      <hr />
      <button
        onClick={() => {
          setMsg((oldValue) => (oldValue += "~"));
          console.log("=== msg", msg);
        }}
      >
        {msg}
      </button>
      <hr />
      <button
        onClick={() => {
          setPerson((oldPerson) => ({ ...oldPerson, name: "里斯" }));
        }}
      >
        {person.name}
      </button>
    </>
  );
}

export default App;
